<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
				<el-button type="primary" @click="issue">应用发布列表</el-button>

			</div>
		</el-header>
		<el-main class="nopadding">
			<lowTable ref="table" border :apiObj="apiObj" stripe remoteSort remoteFilter>
				<el-table-column align="center" label="应用名称" prop="appName" width="170"
					column-key="filterUserName"></el-table-column>
				<el-table-column align="center" label="应用ID" prop="appId" width="170"
					sortable="custom"></el-table-column>
				<el-table-column align="center" label="应用类型" prop="appType" width="170">
					<template #default="scope">
						<span v-if="scope.row.appType == 0">移动H5</span>
						<span v-if="scope.row.appType == 1">移动APP</span>
						<span v-if="scope.row.appType == 2">WebH5</span>
					</template>
				</el-table-column>
				<el-table-column align="center" label="应用secret" prop="appSecret" sortable="custom" width="320">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small">{{ scope.row.appSecret }} </el-button>
							<el-button text type="primary" size="small" @click="reset(scope.row, scope.$index)">重置
							</el-button>
						</el-button-group>
					</template>
				</el-table-column>

				<el-table-column align="center" label="是否启用" prop="enable" width="170">
					<template #default="scope">
						<el-switch v-model="scope.row.enable" :loading="scope.row.$switch_status" :active-value="0"
							:inactive-value="1" @change="changeSwitch($event, scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" align="center" width="320">
					<template #default="scope">
						<el-button-group>
							<el-button text type="primary" size="small"
								@click="limits_show(scope.row, scope.$index)">权限设置
							</el-button>
							<el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)">查看
							</el-button>
							<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">编辑
							</el-button>
							<el-button text type="primary" size="small" @click="issue_show(scope.row, scope.$index)">发布
							</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</lowTable>
		</el-main>
	</el-container>
	<el-drawer v-model="dialog.add" :size="500" title="新增" custom-class="drawerBG" direction="rtl" destroy-on-close>
		<add ref="addDialog" @guanbi="close"></add>
	</el-drawer>
	<el-drawer v-model="dialog.edit" :size="500" title="编辑" custom-class="drawerBG" direction="rtl" destroy-on-close>
		<edit v-if="dialog.edit" ref="editDialog"></edit>
	</el-drawer>


	<el-drawer v-model="dialog.list" :size="1200" title="应用发布列表" custom-class="drawerBG" direction="rtl"
		destroy-on-close>
		<list />
	</el-drawer>

	<el-drawer v-model="dialog.limit" :size="1200" title="应用权限" custom-class="drawerBG" direction="rtl"
		destroy-on-close>
		<limits />
	</el-drawer>

	<el-dialog v-model="dialog.issue" title="发布申请" width="450" :before-close="handleClose">
		<issue />
	</el-dialog>
</template>

<script>
import add from './add'
import edit from './edit'
import list from './list'
import limits from './limits'
import issue from './issue'

export default {
	name: 'app',
	components: {
		add,
		edit,
		list,
		limits,
		issue
	},
	data() {
		return {
			dialog: {
				add: false,
				edit: false,
				list: false,
				limit: false,
				issue: false
			},
			apiObj: this.$API.basic.app.list
		}
	},
	watch: {},

	mounted() { },
	async created() { },
	methods: {
		issue() {
			this.dialog.list = true
		},
		close() {
			this.dialog.add = false
			this.$refs.table.clearSelection()
			this.$refs.table.getData()
		},
		//添加
		add() {
			this.dialog.add = true
			this.$nextTick(() => {
				this.$refs.addDialog.open('add')
			})
		},
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		//查看
		table_show(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('show').setData(row)
			})
		},
		limits_show() {
			this.dialog.limit = true

		},
		issue_show(){
			this.dialog.issue = true
		},



		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable == 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				appId: row.appId
			}
			var res = await this.$API.basic.app.enable.post({ data: data })
			if (res && res.code == 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					// console.log(typeof val, row)
					this.$message.success('操作成功')
				}, 500)
			}
		},
		async reset(row) {
			var res = await this.$API.basic.app.genSecret.post({ data: { appId: row.appId } })
			this.$refs.table.refresh()
		}
	}
}
</script>

<style></style>
